<% order ||= shipment.order %>
<%= turbo_frame_tag dom_id(shipment), class: "card mb-4" do %>
  <div class="card-header stock-location justify-content-between flex-wrap pb-3" data-hook="stock-location" id="shipment">
    <span class="shipment-number d-none"><%= shipment.number %></span>
    <span class="d-flex align-items-center"><%= shipment_state(shipment.state, class: 'mr-3') %></span>
    <% if shipment.shipped_at.present? %>
      <small class="text-muted text-xs mr-2">
        <%= Spree.t(:fulfilled_at).downcase %>
        <%= local_time_ago(shipment.shipped_at, class: 'with-tip') %>
      </small>
    <% end %>

    <span class="d-flex justify-content-between align-items-center gap-2">
      <strong><%= shipment.number %></strong>
      <small class="text-muted"><%= Spree.t(:fulfilled_from).downcase %></small>
      <strong class="stock-location-name" data-hook="stock-location-name">
        <%= shipment.stock_location.name %>
      </strong>
    </span>
  </div>
  <div class="card-body mb-0 p-0">
    <div class="shipment-line-items">
      <div class="text-muted text-center border-bottom py-2 px-3 font-size-sm shipment-line-items__row">
        <span class="text-left">
          <%= Spree.t(:item_description) %>
        </span>
        <span>
          <%= Spree.t(:price) %>
        </span>
        <span>
          <%= Spree.t(:quantity) %>
        </span>
        <span>
          <%= Spree.t(:total) %>
        </span>
        <span>
        </span>
      </div>
      <%= render collection: shipment.manifest, partial: 'spree/admin/orders/shipment_manifest_item', as: :item, locals: { shipment: shipment } %>
    </div>
    <%= turbo_frame_tag dom_id(shipment, :shipping_method), class: "hover-light py-2 px-3 d-flex justify-content-between align-items-center min-h-14" do %>
      <div>
        <% if rate = shipment.selected_shipping_rate %>
          <strong><%= rate.name %></strong>
          <span>
            <%= shipment.display_cost %>
          </span>
        <% else %>
          <%= Spree.t(:no_shipping_method_selected) %>
        <% end %>
      </div>

      <% if( (can? :update, shipment) and !shipment.shipped? && !order.canceled? && !shipment.canceled?) %>
        <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_order_shipment_path(order, shipment), class: 'with-tip btn btn-sm btn-light', no_text: true %>
      <% end %>
    <% end %>

    <%= turbo_frame_tag dom_id(shipment, :tracking), class: "hover-light border-top px-3 d-flex justify-content-between align-items-center min-h-14" do %>
      <div class="py-3">
        <% if shipment.tracked? %>
          <strong><%= Spree.t(:tracking) %>: </strong>
          <% if shipment.tracking_url.present? %>
            <span><%= link_to shipment.tracking, shipment.tracking_url, target: '_blank', rel: "noopener noreferrer" %></span>
          <% elsif shipment.tracking.present? %>
            <span><%= shipment.tracking %></span>
          <% end %>
        <% else %>
          <%= Spree.t('admin.add_tracking_details') %>
        <% end %>
      </div>

      <% if can?(:update, shipment) && (!order.canceled? && !shipment.canceled?) %>
        <%= link_to_with_icon 'edit', Spree.t(:edit), spree.edit_admin_order_shipment_path(order, shipment), class: 'edit-tracking btn btn-light btn-sm with-tip', no_text: true, title: Spree.t(:edit) %>
      <% end %>
    <% end %>

    <% if can_ship?(shipment) %>
      <div class="card-footer d-flex justify-content-end">
        <% if shipment.tracked? %>
          <%= link_to_with_icon 'send.svg', Spree.t(:ship), spree.ship_admin_order_shipment_path(order, shipment), class: 'ml-auto btn btn-primary mb-0', data: {turbo_method: :post, turbo_confirm: Spree.t(:are_you_sure)} %>
        <% else %>
          <span class="ship-tooltip with-tip ship ml-auto btn btn-primary disabled mb-0" data-toggle="tooltip" data-placement="left" title="Before marking shipment as shipped please provide tracking details">
            <%= icon 'send.svg'%>
            <%= Spree.t(:ship) %>
          </span>
        <% end %>
      </div>
    <% end %>
  </div>
<% end %>
